<template>
    <view class="content-swiper-bottom-message-gift" @click="state.show = true">
        <slot name="gift-box"><img src="@/assets/image/icon69.png" alt="" @click="giftFn()"><text>送礼</text></slot>
    </view>
    <van-popup v-model:show="state.show" position="bottom" round teleport="body">
        <view class="gift-main-box">
            <view class="gift-main-head">
                <img src="@/assets/image/icon71.png" alt=""><text>向Ta表达你的心意</text>
            </view>
            <GiftList @update:itemCurGift="ev => state.itemCurGift = ev" />
            <PaySend :itemCurGift="state.itemCurGift" :userImId="props.userImId"  @successAction="successAction"/>
        </view>
    </van-popup>
</template>
    
<script setup>
import { reactive, getCurrentInstance, onMounted } from "vue"
import { getAuthorization, setAuthorization } from "@/utils/auth.js"

import PaySend from '@/pages/home/components/paySend/index.vue'
import GiftList from "@/pages/home/components/giftList/index.vue"

import { onLoad } from '@dcloudio/uni-app'

const props = defineProps({
    userImId:{
        type:Number,
        default:null
    }
})

const state = reactive({
    show: false,
    curIndex: false,
    itemCurGift: {}, // 选中的礼物
})

let emit = defineEmits(['successActionGift'])
const successAction = (data) => {
    state.show = false
    emit('successActionGift',data)
}

onLoad((options) => {

})

</script>
    
<style lang="scss" scoped>
.content-swiper-bottom-message-gift {
    color: #fff;
    flex: none;
    padding: 0 10rpx;
    height: 80rpx;
    line-height: 80rpx;
    display: flex;
    align-items: center;

    img {
        width: 48rpx;
        height: 48rpx;
    }

    text {
        height: 48rpx;
        line-height: 48rpx;
        display: block;
        margin-left: 10rpx;
        font-size: 24rpx;
        color: #999
    }
}

.gift-main-box {
    height: 100%;
    background: #424141;

    .gift-main-head {
        padding: 20rpx;

        img {
            width: 116rpx;
            height: 46rpx;
            margin-right: 20rpx;
        }

        text {
            font-size: 24rpx;
            color: #FFFFFF;
        }
    }

    .gift-main-pay {
        background: #fff;
        display: flex;
        width: 100%;
        padding: 10rpx 30rpx 30rpx 30rpx;
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .gift-main-pay-left {
            display: flex;
            font-size: 28rpx;
            color: #262626;
            align-items: center;

            img {
                width: 36rpx;
                height: 36rpx;
            }

            text {
                font-size: 28rpx;
                color: #262626;
            }

            .gift-main-pay-btn {
                margin-left: 40rpx;
                display: flex;
                align-items: center;

                img {
                    width: 24rpx;
                    height: 24rpx;
                    margin-left: 5rpx;
                }
            }
        }

        .van-button {
            height: 56rpx;
            line-height: 56rpx;
            font-size: 28rpx;
        }
    }
}
</style>
    